<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排行榜 - 食堂点单系统</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <style>
        /* 重置盒模型 */
        *, *::before, *::after {
            box-sizing: border-box;
        }
        /* 适配前端样式 */
        .rank-tabs {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        .rank-tabs button {
            padding: 10px;
            font-size: 16px;
            background-color: #007bff;
            color: white;
            border: none;
            margin: 0 10px;
            cursor: pointer;
        }
        .rank-tabs button:hover {
            background-color: #0056b3;
        }

        /* 横向排列 */
        .rank-list {
            display: flex;
            justify-content: space-evenly;  /* 平均分配，保证元素有间隔 */
            margin-top: 20px;
            padding: 20px;
            flex-wrap: wrap;  /* 允许内容换行 */
        }

        .cart-item {
            display: flex;
            justify-content: space-between; /* 左右分配 */
            align-items: center;  /* 垂直居中 */
            background-color: #fff;
            width: 90%;  /* 页面宽度的90% */
            max-width: 900px; /* 最大宽度 */
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin: 10px 0;  /* 上下间距 */
        }
        .cart-item img {
            width: 100px;
            height: auto;
            border-radius: 8px;
        }
        .cart-item-details {
            flex-grow: 1;
            padding: 0 20px;
            text-align: left;
        }
        .cart-item h3 {
            font-size: 18px;
            margin: 10px 0;
        }
        .cart-item p {
            font-size: 14px;
            margin: 5px 0;
        }

        /* 排名数字 */
        .rank-number {
            font-size: 22px;
            font-weight: bold;
            margin-right: 15px;
            color: #007bff;
        }

        /* 按钮 */
        .cart-item-actions button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            border: none;
        }

        .pagination {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
            margin-bottom: 70px; 
        }
        .pagination button {
            background-color: #007bff;
            color: white;
            padding: 10px;
            cursor: pointer;
            
        }

        .pagination button:disabled {
            background-color: #ccc;
        }
        .footer-buttons {
            width: 100%; 
            background-color: #ffffff;
            color: #fff; 
            position: fixed; 
            bottom: 0; 
            left: 0; 
            z-index: 1000; 
            padding: 10px 0; 
            display: flex; 
            justify-content: space-between;
            box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
            padding-left: 10px; 
            padding-right: 10px; 

        }
        .footer-buttons button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            text-align: center;
            
            
        }
        .footer-buttons button:hover {
            background-color: #0056b3;
        }

        .rank-tabs {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        .rank-tabs button {
            padding: 10px;
            font-size: 16px;
            background-color: #007bff;
            color: white;
            border: none;
            margin: 0 10px;
            cursor: pointer;
        }
        .rank-tabs button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>

    <div class="rank-tabs">
        <button id="sales-tab">销量排行</button>
        <button id="price-tab">价格排行</button>
        <button id="quantity-tab">数量排行</button>
        <button id="rating-tab">评分排行</button>
    </div>
    <div class="footer-buttons">
        <a href="consumer-dashboard.html">
            <button>菜单</button>
        </a>
        <a href="cart.html">
            <button>购物车</button>
        </a>
        <a href="rank.html">
            <button>排行榜</button>
        </a>
        <a href="my.html">
            <button>我的</button>
        </a>
    </div>
    <div class="rank-list" id="rank-list">
        <!-- 排行榜内容将动态加载 -->
    </div>

    <div class="pagination">
        <button id="prev-btn">上一页</button>
        <span id="page-info">第 1 页 / 总 1 页</span>
        <button id="next-btn">下一页</button>
    </div>

    <script>
        let currentPage = 1;
        let totalPages = 1;
        let currentTab = 'sales'; // 默认显示销量排行

        // 加载排行榜数据
        function loadRankData() {
            fetch(`/api/rank/${currentTab}?page=${currentPage}&per_page=5`)
                .then(response => response.json())
                .then(data => {
                    totalPages = data.total_pages;
                    const rankList = document.getElementById('rank-list');
                    rankList.innerHTML = ''; // 清空当前排行榜内容

                    // 填充排行榜数据
                    data.products.forEach((product, index) => {
                        const productDiv = document.createElement('div');
                        productDiv.className = 'cart-item';
                        productDiv.innerHTML = `
                            <div class="rank-number">${(currentPage - 1) * 5 + index + 1}</div> <!-- 排名数字 -->
                            <img src="/images/products/${product.picture_path}" alt="${product.name}" />
                            <div class="cart-item-details">
                                <h3>${product.name}</h3>
                                <p>价格: ¥${product.price}</p>
                                <p>库存: ${product.stock}</p>
                                <p>销量: ${product.total_sales || ''}</p>
                                <p>评分: ${product.average_rating || '暂无评分'}</p> <!-- 显示平均评分 -->
                            </div>
                            <div class="cart-item-actions">
                                <button onclick="addToCart(${product.id})">加入购物车</button>
                            </div>
                        `;
                        rankList.appendChild(productDiv);
                    });

                    // 更新分页信息
                    document.getElementById('page-info').innerText = `第 ${currentPage} 页 / 总 ${totalPages} 页`;
                })
                .catch(error => {
                    console.error('加载排行榜失败', error);
                });
        }

        // 加入购物车功能
        function addToCart(productId) {
            fetch('/api/cart', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    product_id: productId,
                    quantity: 1  // 默认每次加入1个
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('商品已加入购物车');
                } else {
                    alert('加入购物车失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('加入购物车失败', error);
            });
        }

        // 点击排行按钮
        document.getElementById('sales-tab').addEventListener('click', () => {
            currentTab = 'sales';
            currentPage = 1;
            loadRankData();
        });

        document.getElementById('price-tab').addEventListener('click', () => {
            currentTab = 'price';
            currentPage = 1;
            loadRankData();
        });

        document.getElementById('quantity-tab').addEventListener('click', () => {
            currentTab = 'quantity';
            currentPage = 1;
            loadRankData();
        });

        document.getElementById('rating-tab').addEventListener('click', () => {
            currentTab = 'rating';
            currentPage = 1;
            loadRankData();
        });
        // 分页按钮
        document.getElementById('prev-btn').addEventListener('click', () => {
            if (currentPage > 1) {
                currentPage--;
                loadRankData();
            }
        });

        document.getElementById('next-btn').addEventListener('click', () => {
            if (currentPage < totalPages) {
                currentPage++;
                loadRankData();
            }
        });

        loadRankData();  // 初始化时加载销量排行榜
    </script>

</body>
</html>
